<template>
    <div class="page" data-page="inspectionApply" style="z-index: 2;">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left">
                    <a href="#" class="link back" @click="$root.backToTab()">
                        <i class="icon icon-back"></i>
                        <span class="ios-only">Back</span>
                    </a>
                </div>
                <div class="title jump_name" style="left: -25px;"></div>
            </div>
        </div>
        <div class="page-content infinite-scroll-content">
            <div class="list mtop">
                <ul id="zbInfo">
                    <li>
                        <div class="item-content" style="padding-left: 0;">
                            <div class="item-inner right_DW">
                                <div class="item-title left_wd">任务名称</div>
                                <div class="item-after" id="ZGname"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content" style="padding-left: 0;">
                            <div class="item-inner right_DW">
                                <div class="item-title left_wd">查岗类型</div>
                                <div class="item-after" id="ZGtype"></div>
                            </div>
                        </div>
                    </li>

                    <li>
                        <div class="item-content" style="padding-left: 0;">
                            <div class="item-inner right_DW">
                                <div class="item-title left_wd">查岗单位</div>
                                <div class="item-after" id="ZGunit"></div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="item-content" style="padding-left: 0;">
                            <div class="item-inner right_DW">
                                <div class="item-title left_wd">查岗时间</div>
                                <div class="item-after" id="ZGtime"></div>
                            </div>
                        </div>
                    </li>
                    <!--  <li>
                        <div class="item-content">
                            <div class="item-inner">
                                <div class="item-title left_wd">查岗结果</div>
                            </div>
                        </div>
                    </li> -->
                    <!--人员列表-->
                </ul>
                <div class="divide-gray mt98" style="margin-top: 0px;"></div>
                <div class="item-content" style="padding-left: 0;">
                    <div class="item-inner">
                        <div class="item-title left_wd addInfo">查岗结果</div>
                    </div>
                </div>
                <ul id="VDPersonOnDuty"></ul>
                <!-- <div style="background-color: rgba(234, 240, 243, 0.5);height: 10px" class="div_line" ></div> -->
                <div id="myMapInfo" style="height: 200px; margin: 20px"></div>

            </div>
        </div>
    </div>
</template>
<style scoped>
    .addInfo {
        border-left: 2px solid #378bf6;
        padding-left: 10px;
    }

    #VDPersonOnDuty:before,
    #VDPersonOnDuty:after {
        height: 0px;
    }

    #zbInfo:before,
    #zbInfo:after {
        height: 0px;
    }

    .left_wd {
        left: 16px;
    }

    .mtop {
        margin: 0px;
    }

    .right_DW {
        position: relative;
    }
</style>

<script>
    return {

        data: function () {
            return {
                taskId: 0,
            }
        },
        mounted() {
            var self = this;
            var $ = self.$;
            $("#ZGtype").html("手动查岗");
            /*  $("#ZGname").html(this.$route.params.taskName); */
            $(".jump_name").append(this.$route.params.taskName);
            self.taskId = self.$route.params.taskId;
            // self.getPersonOnDuty();//值班人员
            self.getResult_();
            self.getToday_zhagangName();
        },
        methods: {
            drowBmap: function (pointArray) {
                //百度地图显示
                var map = new BMap.Map('myMapInfo', {
                    enableMapClick: false //关闭底图可点功能
                });
                var point = null;
                for (var i = 0; i < pointArray.length; i++) {
                    var lon = pointArray[i].lon;
                    var lat = pointArray[i].lat;
                    var name = pointArray[i].dutyName;
                    point = new BMap.Point(lon, lat);
                    var icon = new BMap.Icon('/ilink-app-h5-zd/static/img/rdspFile_1557407485851.png', new BMap
                        .Size(35, 55), {
                            anchor: new BMap.Size(35, 55)
                        });
                    var marker = new BMap.Marker(point, {
                        icon: icon
                    });
                    var label = new BMap.Label(name, {
                        offset: new BMap.Size(-6, -25)
                    });
                    label.setStyle({
                        display: "block",
                        color: "green",
                        fontSize: "12px",
                        height: "25px",
                        lineHeight: "20px",
                        'padding-left': "10px",
                        'padding-right': "10px",
                        "max-width": "none",
                        "min-width": "15px",
                        "border": "1px solid green",
                        fontFamily: "微软雅黑"
                    });
                    marker.setLabel(label);
                    map.addOverlay(marker);
                }
                map.centerAndZoom(point, 15);
                map.enableScrollWheelZoom(); //允许缩放
            },
            getResult_: function () {
                var self = this;
                var pointArray = [];
                Dao.getResult({
                    userName: userInfor.accountName,
                    deviceId: appKeyObj.deviceId,
                    inspectId: self.taskId,
                }, function (data) {
                    var personData = [];
                    personData = data;
                    for (var i = 0; i < personData.length; i++) {
                        $("#ZGtime").html(personData[i].initiateTime);
                        $("#ZGunit").html(personData[i].organizationName.toString());
                        var imageurl = '';
                        var flag = '';
                        var coltext = '';
                        if (personData[i].byCheckImg != '') {
                            imageurl = personData[i].byCheckImg;
                        } else {
                            imageurl = staticPath + 'img/mine/defaulticon.png';
                        }
                        if (personData[i].longitude && personData[i].latitude) {
                            var obj = {};
                            obj.lon = personData[i].longitude;
                            obj.lat = personData[i].latitude;
                            obj.dutyName = personData[i].byCheckName;
                            pointArray.push(obj);
                        }
                        //1:查岗中 2:漏岗 3:离岗 4:在岗
                        if (personData[i].result == 3) {
                            flag = "离岗";
                            coltext = '#9A9A9A';
                        } else if (personData[i].result == 4) {
                            flag = "在岗";
                            coltext = '#77BE07';
                        } else if (personData[i].result == 1) {
                            flag = "查岗中";
                            coltext = '#a7a7a7';
                        } else if (personData[i].result == 2) {
                            flag = "漏岗";
                            coltext = '#F8B448';
                        }

                        $("#VDPersonOnDuty").append(
                            `<li><label class="item-content">
                            <div class="item-media"><img src=` + imageurl + ` style="width:44px;height:44px;border-radius:22px;margin-left:13px;"></div>
                            <div class="item-inner">
                                <div class="">
                                    <div class="item-title">` + common.transNullundefined(personData[i].byCheckName) + `</div>
                                    <div class="item-subtitle">电话 ` + common.transNullundefined(personData[i]
                                .byCheckPhone) + `</div>
                                </div>
                                <div class="item-subtitle" style="background-color: ` + coltext +
                            `;width: 47px;height: 21px; text-align: center;border-radius:1px;color:#FFFFFF">` +
                            flag + `</div>
                            </div>
                        </label>
                    </li>`
                        )
                    }
                    if (pointArray.length > 0) {
                        self.drowBmap(pointArray);
                    }
                });
            },
            //查岗名称
            getToday_zhagangName: function () {
                var self = this;
                var $ = self.$;
                var date = new Date();
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                self.currentdate = month + "-" + strDate + '手动查岗';
                $("#ZGname").html(self.currentdate);
            }
        }
    }
</script>